<template>
  <div>
    <span>{{label}}:</span>
    <slot></slot>
    <span v-if="isShow" class="vali-error">不能为空</span>
  </div>
</template>

<script>
import emitter from './form-bus'
export default {
  name: 'ElFormItem',
  componentName: 'ElFormItem',
  mixins: [emitter],
  props: {
    label: String,
    prop: String
  },
  data () {
    return {
      isShow: false
    }
  },
  created () {
    this.$on('vali', function () {
      this.vali()
    })
  },
  inject: ['form'],
  computed: {
    fieldValue () {
      return this.form.model[this.prop]
    }
  },
  watch: {
    fieldValue () {
      this.vali()
    }
  },
  methods: {
    vali () {
      this.isShow = this.fieldValue === ''
    }
  }
}
</script>
